<script>
import { mapState } from 'vuex'
import RunningTime from '@/common/runningTime'
import VReal from './comp/VReal'
import VFlow from './comp/VFlow'
import VWeather from './comp/VWeather'
import VContrast from './comp/VContrast'

export default {
  components: { RunningTime, VReal, VFlow, VWeather, VContrast },
  data() {
    return {
      typeList: [
        { name: '实时面板', tpl: 'VReal' },
        { name: '客流详情', tpl: 'VFlow' },
        { name: '天气分析', tpl: 'VWeather' },
        { name: '对比分析', tpl: 'VContrast' },
      ],
      currentType: 'VReal',
    }
  },
  computed: {
    ...mapState({
      classList: state => state.sportList,
    }),
  },
  watch: {
    classList: {
      handler() {
        if (this.classList) {
          let type = this.$route.params.id
          if (!type) {
            this.$router.replace({
              path: '/wms/analysis',
              params: { id: this.classList[0].id },
            })
          }
        }
      },
      immediate: true,
    },
  },
  beforeRouteUpdate(to, from, next) {
    this.$refs.child.update(to)
    next()
  },
}
</script>

<template lang="pug">
.mainRight
  el-radio-group(v-model="currentType")
    el-radio-button(v-for="item in typeList"  :key="item.name" :label="item.tpl") {{item.name}}
  component(:is="currentType" ref="child")
</template>
<style lang="stylus" scoped>
.el-radio-group
  display block
  margin-bottom 20px
  text-align center
  .el-radio-button
    margin-right 50px
@media screen and (max-width: 650px)
  .el-radio-group
    .el-radio-button
      margin-right 0px
</style>
